<template>
	<view class="pages">
		<view v-if="is_login==false">
			<view class="u-flex-column no_login u-flex-center ">
				<view class="heard_img" style="margin-right: 0;">
					<image
						:src="`${$http_cos}/static/%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F.png`">
					</image>
				</view>
				<view class="login" @click="login">
					<text>登录</text>
				</view>
			</view>
			<view class="main_pd">
				<view class="not-main">
					<text class="title">简单一步，遇见优秀的TA</text>
					<view class="not-main-wx u-flex-column">
						<text>添加专属红娘为好友，全方位助您线下脱单</text>
						<view class="u-flex-y-center">
							<text>微信：{{wx_name}}</text>
							<view class="copy u-flex-x-center" @click="copy">
								<text>复制</text>
							</view>
						</view>
					</view>
					<view class="sweep u-flex-center u-flex-column">
						<view class="qr_code">
							<image
								:src="`${$http_cos}/static/35631673848586_.pic.jpg`">
							</image>
						</view>
						<text>扫一扫上面的二维码，加我为朋友</text>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="u-flex my_heard" v-if="user_info">
				<view class="heard_img">
					<image :src="user_info.headimgurl"></image>
				</view>
				<view class="u-flex-column u-flex-1 heard_right">
					<text>{{user_info.nickname}}</text>
					 <text v-if='isMatchmaker==1'>红娘:{{user_info.userId}}</text>
					<view v-else>
						<text v-if='user_info.memberId==0'>游客</text>
						<text v-else>会员ID:{{user_info.userId}}</text>
					</view>
				</view>
			</view>
			<view class="main">
				<view class="main_bg" style="padding:0rpx 24rpx 32rpx">
					<view class="u-flex-between u-flex-y-center title_warp">
						<view class="u-flex-column title_left">
							<text>当前资料权益</text>
							<text v-if="Number(user_info.memberId)>0">到期时间：{{user_info.endTime}}</text>
						</view>
						<view class="u-flex-x-center look_grade" @click="look_grade">
							<text class="title_right">查看权益等级</text>
							<view class="look_grade_img">
								<image
									:src="`${$http_cos}/static/%E5%8F%B3%E7%AE%AD%E5%A4%B4.png`">
								</image>
							</view>
						</view>
					</view>
					
					<swiper class="swiper" :circular="circular" :display-multiple-items="4" :duration="duration"  :current="current"
					next-margin="-10px" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						>
						<swiper-item v-for="(item,index) in menber_list" :key="index" style="margin-right: 20rpx !important">
							<view  class="menber_img" style="margin-right:10px;">
								<image :src="get_number_img(item)" ></image>
							</view>
						</swiper-item>	
					</swiper>
				</view>
				<view class="main_bg">
					<view class="title">
						<text>我的功能</text>
					</view>
					<view class="u-flex-y-center u-flex-wrap my_function_list">
						<view class="my_function_item u-flex-column" v-for="(item,index) in list" :key="index"
							@click="skip(item)" v-if="item.isDeputy?(user_info.isDeputy==1?false:true):true">
							<view class="my_function_img_warp">
								<image :src="item.src" class="my_function_img"></image>
								<view class="corner_mark" v-if="item.mark">
									<text>{{item.mark}}</text>
								</view>
							</view>
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <u-action-sheet :actions="actionSheetlist"  round="20" cancelText="取消" closeOnClickOverlay @cancel="actionClose" @close="actionClose" @select="select_action"   :show="actionshow"></u-action-sheet> -->
		<u-picker :show="authority_show" :immediateChange="immediateChange" :showToolbar="showToolbar" :columns="columns" :itemHeight="80" title="权限"
			@cancel="cancel" keyName="name" @confirm="authority_submit"></u-picker>
		<u-popup :show="show" @close="close" :safeAreaInsetBottom="safeAreaInsetBottom" mode="center" round="20">
			<view class="select_members">
				<view class="h1">
					<text>选择会员权限</text>
				</view>
				<view class="u-flex-x-center contener" @click="authority_show=true;show=false">
					<text class="label">权限</text>
					<view class="u-flex-between down_border u-flex">
						<text>{{user.name?user.name:''}}</text>
						<view class="down">
							<image :src="`${$http_cos}/static/down.png`"></image>
						</view>
					</view>
				</view>
				
				<view class="u-flex-x-center contener">
					<text class="label">时间</text>
					<view class="u-flex-between down_border u-flex">
						<text v-if="user.days!=0">{{user.days}}天</text>
						<text v-else>无限期</text>
					</view>
				</view>
				<view class="u-flex-x-center contener" v-if="user.type==0">
					<text class="label">积分</text>
					<view class="u-flex-between down_border u-flex">
						<input  type="number" placeholder="请输入赠送的积分" v-model="integral"/>
					</view>
				</view>
				<view class="u-flex-between u-flex">
					<view class="btn disagree" @click="show=false">
						<text>取消</text>
					</view>
					<view class="btn agree" @click="agree">
						<text>确定</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const app = getApp();
	import {
		getMemberList,
		getUserInfo,
		getInviteCode
	} from '@/common/api.js';
	import {
		fun_list
	} from "@/util/fun_list.js"
	import {menber_list} from '@/util/grade_member.js'
	export default {
		data() {
			return {
				circular: true,
				duration: 500,
				current: 0,
				indicatorDots: false,
				autoplay: false,
				interval: 5000,
				integral:'',
				immediateChange:true,
				$http_cos:app.$http_cos,
				safeAreaInsetBottom:false,
				isMatchmaker: 0,
				showToolbar: false,
				user_info: {},
				is_login: false,
				closeOnClickOverlay: true,
				actionshow: false,
				actionSheetlist: [{
						name: '保存到相册',
					},{
					name: '扫一扫',					}
					],
				wx_name: 'ai18758681314',
				list: [],
				false: false,
				columns: [],
				user: '',
				defaultDate_time: [],
				show: false,
				authority_show: false,
				my_user: {},
				menber_list:menber_list
			}
		},
		onLoad() {
			this.savePic =
				'https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E8%93%9D%E9%B2%B8%E4%BC%9A%E5%91%98.png'
		},
		onShow() {


			try {
				if (uni.getStorageSync('access_token')) {
					this.is_login = true
					
					this.getMember_List()
					this.get_UserInfo()
				} else {
					this.is_login = false
				}		
			} catch (e) {
				//TODO handle the exception
			}
		},
		methods: {
			get_number_img(item){
					let url=''
				if(this.user_info.memberName==item.label){
					url=this.$http_cos+item.urls
				}else{
					url=this.$http_cos+item.name
				}
				return url+'?imageView2/2/w/750/h/q/85'
			},
			look_grade(){
				uni.navigateTo({
					url:'/pagesD/memberRequity/index'
				})
			},
			login() {
				uni.navigateTo({
					url: '/pages/guide/index'
				})
			},
			copy() {
				uni.setClipboardData({
					data: this.wx_name,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						});
					}
				});
			},
			skip(item) {
				if (item.name == '邀请会员') {
					this.show = true
					return
				}
				if(item.name=='清除缓存'){
					try{
						uni.removeStorageSync('numberFormData')
						uni.$u.toast('清除缓存成功')
					}catch(e){
						//TODO handle the exception
					}
					return
				}
				if(item.name=='我的主页'&&item.url.indexOf('?')<0){
					let url=item.url+'?id='+this.user_info.userId
					item.url=url
				}
				uni.navigateTo({
					url: item.url,
					fail: function() {
						uni.switchTab({
							url: item.url,
						})
					}
				})
			},
			agree() {
				this.show=false
				let data={
					memberId:this.user.id,
					integral:this.integral
				}
				getInviteCode(data, {
					custom: {
						auth: false,
						toast: false,
						catch: false
					}
				}).then((result) => {
					console.log(result)
					this.integral=''
					// this.user_info = r
					uni.navigateTo({
						url: '/pagesC/perfect_data/index?id=' +result
					})
				}).catch((err) => {})
				
			},
			get_UserInfo() {
				getUserInfo({
						custom: {
							auth: false,
							toast: false,
							catch: false
						}
					}).then((r) => {
						this.user_info = r
						try{
							uni.setStorageSync('user_info',r)
						}catch(e){
							//TODO handle the exception
						}
					let {
						isMatchmaker,
						memberId
					} = r
					if (isMatchmaker == 0) {
						this.list = fun_list.tourist
					} else if (isMatchmaker == 1) {
						this.list = fun_list.matchmaker
					}
					this.isMatchmaker = isMatchmaker
				}).catch((err) => {

				})
			},
			getMember_List() {
				getMemberList({
						custom: {
							auth: false,
							toast: false,
							catch: false
						}
					}).then((r) => {
						
					this.columns = [r]
					this.user = r[0]
				}).catch((err) => {

				})
			},
			confirm(e) {
				this.show = true
			},
			authority_submit(e) {
				this.user = e.value[0]
				this.cancel()
			},
			cancel() {
				this.show = true
				this.authority_show = false
			},
			time_close() {
				this.time_show = false
				this.show = true
			},
			authority_close() {
				this.authority_show = false
				this.show = true
			},
			close() {
				this.show = false
			},
			dianji() {
				this.show = true
			},
			submit() {
				let isclick = true
				if (isclick) {
					isclick = false
					uni.navigateTo({
						url: './perfect_data_five/index',
						success: () => {
							isclick = true
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.pages {
		.heard_img {
			width: 144rpx;
			height: 144rpx;
			margin-right: 27rpx;
			border-radius: 50%;
			border: 6rpx solid #FFFFFF;
			overflow: hidden;
		}

		.no_login {
			align-items: center;
			padding: 67rpx 0 52rpx;
		}

		.main_pd {
			padding: 0 24rpx;
			box-sizing: border-box;

			.not-main {
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 0 32rpx 61rpx;
				box-sizing: border-box;
				overflow: hidden;

				.title {
					font-size: 30rpx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #000000;
					line-height: 85rpx;
				}

				.not-main-wx {
					background: #F6F6F6;
					border-radius: 20rpx;
					height: 182rpx;
					padding: 33rpx 32rpx;
					box-sizing: border-box;
					margin-bottom: 24rpx;
					justify-content: space-between;

					text {
						font-size: 28rpx;
						color: #101010;
					}

					.copy {
						width: 120rpx;
						height: 58rpx;
						text-align: center;
						align-items: center;
						// line-height: 58rpx;
						background-color: #FF7612;
						border-radius: 12rpx;
						margin-left: 25rpx;

						text {
							color: #fff;
							font-size: 28rpx;
						}
					}
				}

				.sweep {
					padding: 48rpx 0;
					background: #F6F6F6;
					border-radius: 20rpx;
					height: 347rpx;
					box-sizing: border-box;
					align-items: center;

					.qr_code {
						width: 200rpx;
						height: 200rpx;
						border: 6rpx solid #FFFFFF;
						border-radius: 10rpx;
						box-sizing: border-box;
					}

					text {
						display: block;
						margin-top: 23rpx;
						font-size: 28rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #000000;
					}
				}
			}

		}

		.login {
			width: 200rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			border: 2rpx solid #D2D2D2;
			border-radius: 36rpx;
			background-color: #fff;
			margin-top: 24rpx;

			text {
				font-size: 28rpx;
				color: #000000;
			}
		}

		.my_heard {
			padding: 66rpx 0rpx 11rpx 40rpx;
			box-sizing: border-box;
			background: linear-gradient(180deg, #EDEDED, #F4F5F7);
			align-items: center;



			.heard_right {
				line-height: 50rpx;

				text {
					&:first-child {
						font-size: 32rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #000000;
					}

					&:last-child {
						font-size: 28rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #A3A3A3;
					}
				}
			}

		}
	}

	.main {
		padding: 42rpx 24rpx 0;
		box-sizing: border-box;
		background-color: #F3F3F3;

		.main_bg {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 24rpx 17rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;

			.title {
				padding: 31rpx 0rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				font-weight: bold;
				color: #111111;
			}

			.title_warp {
				box-sizing: border-box;
				height: 132rpx;

				.title_left {
					text {
						&:last-child {
							color: #A7A6A6;
						}

						&:first-child {
							font-weight: bold;
							font-size: 32rpx;
						}
					}
				}

				.look_grade {
					align-items: center;
					.look_grade_img {
						width: 12rpx;
						height: 20rpx;
						display: block;
						margin-left: 10rpx;
					}
				}

				text {
					font-size: 28rpx;
					color: #111111;
				}
			}

			// .menber_list {
			// 	align-items: center;

			
			// }
			// .menber_list{
			// 	width: 100%;
			// 	display: flex;
			// 	flex-direction: row;
			// 	align-items: center;
			// 	justify-content: center;
			// 	box-sizing: border-box;
				.swiper {
					height: 200rpx;
					width: 100%;
					overflow: hidden;
					
					swiper-item {
						// display: flex;
						// flex-direction: row;
						// align-items: center;
						// justify-content: center;
						width: 100%;
						height:100%;
						
						box-sizing: border-box;
						// flex-direction: column;
							
					}
					
				}
				.menber_img {
					width: 152rpx;
					height: 200rpx;
					display: inline-block;
					image{
						width:100%;
						height:100%;
						display: block;
					}
				}
			// }
			
		}
	}

	.my_function_list {
		// padding:23rpx 8rpx;
		box-sizing: border-box;

		.my_function_item {
			padding: 23rpx 0;
			align-items: center;
			width: 25%;

			.my_function_img_warp {
				position: relative;

				.my_function_img {
					width: 50rpx;
					height: 50rpx;
					margin-bottom: 29rpx;
				}

				.corner_mark {
					position: absolute;
					width: auto;
					height: 32rpx;
					line-height: 32rpx;
					box-sizing: border-box;
					width: 90rpx;
					top: -20rpx;
					right: -64rpx;
					text-align: center;
					background-color: #FF0000;
					border-radius: 16rpx 16rpx 16rpx 0rpx;

					text {
						font-size: 22rpx;
						color: #FFFFFF;
						display: block;
					}
				}

			}

			text {
				font-size: 26rpx;
				color: #000000;
			}
		}

	}

	.select_members {
		padding: 45rpx 36rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 46rpx;
		width: 650rpx;
		height:auto;
		z-index: 32222;

		.h1 {
			font-size: 32rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #111111;
			text-align: center;
			width: 100%;
			padding: 10rpx 0 48rpx;
		}

		.share-contnet {
			width: 100%;
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 777;

			.share-bj {
				width: 100%;
				height: 100%;
				background-color: #333333;
				opacity: 0.8;
				z-index: 888;
				position: absolute;
			}

			.share-image {
				width: 100%;
				height: 100%;
				display: flex;

				image {
					z-index: 999;
					width: 800rpx;
					margin-top: 200rpx;
				}
			}
		}

		.contener {
			align-items: center;
			margin-bottom: 24rpx;

			.label {
				display: block;
				white-space: nowrap;
			}

			text {
				font-size: 28rpx;
				font-weight: 400;
				color: #111111;
			}

			.down_border {
				margin-left: 27rpx;
				border: 2rpx solid #C2C2C2;
				border-radius: 20rpx;
				background: #ffffff;
				height: 88rpx;
				width: 454rpx;
				align-items: center;
				padding: 0 34rpx 0 32rpx;

				.down {
					width: 20rpx;
					height: 12rpx;
				}
				input{
					font-size:28rpx;
				}
			}

		}
	}
</style>
